<template>
  <div>
    管理页面
    <el-tabs v-model="search.status" class="demo-tabs" @tab-click="handleTabClick">
      <el-tab-pane :label="item.name+'('+item.num+')'" :name="item.name=='全部'?'':item.name" v-for="item in staticList" :key="item.name"></el-tab-pane>
    </el-tabs>
    <!-- 通过表单渲染订单列表 -->
    <p>{{JSON.stringify(search)}}</p>
     <el-table :data="orderlist" style="width: 100%">
    <el-table-column prop="OrderNum" label="订单编号"  />
    <el-table-column prop="createAt" label="下单事件"   />
    <el-table-column prop="customerId" label="会员账号"   />
    <el-table-column prop="customer_total_amount" label="订单总额"  />
    <el-table-column prop="shoppingAdd" label="所属门店"  />
    <el-table-column prop="status" label="订单状态"  />
    <el-table-column label="操作" width="120">
      <template #default>
        <el-button link type="primary" size="small" @click="handleClick"
          >查看订单</el-button
        >
        
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>
<script setup>
// reactive 响应式（引用类型）
// ref 响应式（值类型）
import {  reactive,ref,nextTick} from "vue";
// 获取静态订单，获取订单
import { GetOrderStatic,GetOrderList} from "@/api/order";
// 订单统计信息
const staticList = reactive([]);
// 订单信息
const orderlist = ref([]);
// 搜索条件
const search = reactive({
    status:''
})
// 请求订单统计信息
GetOrderStatic()
.then((res) => {
// 更新订单统计信息
staticList.push(...res.data.list);
})
.catch((err) => console.error(err));
// tab被点击
const handleTabClick = (tab,event) => {
  console.log({...tab}, event)
// search.status = tab.paneName;
// nextTick数据更新，等待dom更新完毕再执行
    nextTick(()=>{
         getOrderlist();
    })
 
}
// 定义获取订单信息的方法（获取订单多次使用）
function getOrderlist(){
    GetOrderList(search)
    .then(res=>{
        console.log(res.data);
        // 更新订单列表
        orderlist.value = res.data.data;
    })
}
getOrderlist();
</script>